<script lang="ts" setup>
import IRequest from "@/config/request";
import wx from "weixin-js-sdk";
import { configSetParam } from "@/utils";

const info = ref();
const err = ref();
const configErr = ref();
const init = async () => {
  const { data } = await IRequest.get({
    url: `/cozemp/wx/jsapi/${configSetParam.appId}/getJsapiTicket`,
    params: { url: window.location.href },
  });
  wx.config({
    debug: false,
    appId: configSetParam.appId,
    timestamp: data.timestamp,
    nonceStr: data.nonceStr,
    signature: data.signature,
    jsApiList: [],
    // 可选，需要使用的开放标签列表，例如['wx-open-launch-weapp','wx-open-launch-app']
    openTagList: ["wx-open-launch-weapp"],
  });
  wx.ready(function () {
    var btn = document.getElementById("launch-btn");
    btn.addEventListener("launch", function (e) {
      console.log("success");
    });
    btn.addEventListener("error", function (e) {
      console.log("fail", e.detail);
    });
  });
  wx.error(function (res) {
    configErr.value = res;
    console.log("失败", res);
  });
};
onMounted(() => {
  init();
});
</script>

<template>
  <div class="mini">
    <div>configErr:{{ configErr }}</div>
    <div>info:{{ info }}</div>
    <div>err:{{ err }}</div>
    <div style="width: 100%; position: relative">
      <!-- height写死168px是因为text/wxtag-template标签里的元素继承不了外面的。。 -->
      <img
        style="width: 100%; height: 168px"
        id="ad"
        src="../assets/images/show/img5.svg"
        alt=""
      />
      <div
        class="bottom-button"
        style="
          background-color: hotpink;
          height: 100%;
          opacity: 0;
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
        "
      >
        <wx-open-launch-weapp
          id="launch-btn"
          username="gh_cbe8503ac9f5"
          path="pages/index/index"
          style="display: block; height: 100%"
        >
          <component
            :is="'script'"
            type="text/wxtag-template"
            style="display: block; height: 168px; width: 100%"
          >
            <button
              style="height: 168px; width: 100%; border: none; padding: 0; margin: 0"
            >
              确定
            </button>
          </component>
        </wx-open-launch-weapp>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
